<!--管理已发布消息-->
<template>
    <div>
        <page-header title="管理已发布的消息" content="Manage message" />

        <page-main>
            <el-tabs v-model="activeTab"  type="border-card">
                <el-tab-pane name="task">
                    <span slot="label" style="font-size: 18px; font-weight: bold;">任务</span>
                    <div style="margin-bottom: 10px; font-size: 20px; font-weight: bolder;">
                        优先顺序：
                        <el-radio-group v-model="reverse">
                            <el-radio :label="false" border>旧消息</el-radio>
                            <el-radio :label="true" border>新消息</el-radio>
                        </el-radio-group>
                    </div>
                    <el-timeline :reverse="reverse">
                        <el-timeline-item v-for="(item,index) in list" :key="index" :type="item.receiver== '教师'?'primary':'success' " :timestamp="item.time" placement="top">
                            <el-card :body-style="card_body_style" shadow="hover" @click.native="ToDetails(item)">
                                接收人类型：<el-tag :type="item.type?'':'success'" style="margin: 5px; font-size: 15px;">{{ item.receiver }}</el-tag>
                                <h3>
                                    {{item.message_title }}
                                </h3>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
                <el-tab-pane name="notice">
                    <span slot="label" style="font-size: 18px; font-weight: bold;">通知</span>
                    <div style="margin-bottom: 10px; font-size: 20px; font-weight: bolder;">
                        优先顺序：
                        <el-radio-group v-model="reverse">
                            <el-radio :label="false" border>旧消息</el-radio>
                            <el-radio :label="true" border>新消息</el-radio>
                        </el-radio-group>
                    </div>
                    <el-timeline :reverse="reverse">
                        <el-timeline-item v-for="(item,index) in notice_list" :key="index" :type="item.receiver== '教师'?'primary':'success' " :timestamp="item.time" placement="top">
                            <el-card :body-style="card_body_style" shadow="hover" @click.native="ToDetails(item)">
                                接收人类型：<el-tag :type="item.type?'':'success'" style="margin: 5px; font-size: 15px;">{{ item.receiver }}</el-tag>
                                <h3>
                                    {{item.message_title }}
                                </h3>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
import PageMain from '../../components/PageMain/index'
import api from '@/api'

export default {
    name: 'manage.message',
    components: {PageMain},
    data() {
        return {
            activeTab: 'task',
            reverse: true,
            list: [],
            notice_list: [],
            tagtype: true,
            show: true,
            card_body_style: {padding: '10px'}
        }
    },
    computed: {
        isEdit() {
            return this.$store.state.settings.mode // 需要监听的数据
        }
    },
    watch: {
        isEdit() {
            if (this.$store.state.settings.mode == 'mobile') {
                this.show = false
            } else {
                this.show = true
            }
        }
    },
    created() {
        if (this.$store.state.settings.mode == 'mobile') {
            this.show = false
        } else {
            this.show = true
        }
        // 获取任务列表信息
        api.post('schoolMessage/findTask', { account: this.$store.state.user.account})
            .then(res => {
                this.list = res.data
            })
        // 获取通知列表信息
        api.post('schoolMessage/findNotice', { account: this.$store.state.user.account})
            .then(res => {
                this.notice_list = res.data
            })
    },
    methods: {
        ToDetails(item) {
            console.log('你点击了这里')
            this.$router.push({
                path: '/school/message_details',
                query: {
                    type: item
                }
            })
        }
    }

}
</script>

<style lang="scss" scoped>
// 时间线
::v-deep .el-timeline {
    padding: 0;
}

</style>
